<template>
    <div ref="OuterboxDom" class="box">
        <div class="leftarrow" @click="leftTab" ref="leftarrow">
            <IconFont type="icon-fanhui" />
        </div>
        <div class="rightarrow" @click="rightTab" ref="rightarrow">
            <IconFont type="icon-jinru" />
        </div>
        <div class="NavigationCon">
            <div class="NavigationCon-box" ref="BoxScroll">
                <div class="NavigationCon-box-item" ref="ItemScroll" :style="{ width: (185 + 20) * ConData.length + 'px' }">
                    <div class="NavigationCon-box-item-Cards" v-for="(item, index) in ConData" :key="index">
                        <Card class="Card_one" :chartData="item" :height="'240'" :longHeight="'240'"
                            :posterHeight="'240'" />
                    </div>
                    <div class="NavigationCon-box-item-con">
                        <RouterLink to="/gengduo">
                            <div class="icon">
                                <el-icon>
                                    <Right />
                                </el-icon>
                            </div>
                        </RouterLink>
                        <span style="display: inline-block; width: 100px">查看更多 </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch, onMounted, nextTick } from 'vue';
import Card from '@/components/Card/index.vue';
const Props = defineProps(['ConData', 'ScrollWidth']);
const { ConData, ScrollWidth }: any = toRefs(Props);

//左箭头的dom元素
const leftarrow = ref();
//右箭头的dom元素
const rightarrow = ref();
// Box盒子
const BoxScroll: any = ref();
// Box下的子元素
const ItemScroll: any = ref();
// 获取所有子元素
const chiLength = ref();
// 获取子元素的宽度
const chiWidth = ref();

const LastChildLeft = ref();


// 获取页面尺寸
onMounted(() => {
    chiLength.value = ItemScroll.value.children.length;    
    chiWidth.value = ItemScroll.value.children[0].scrollWidth;
});

// 监听页面尺寸发生变化
window.addEventListener('resize', () => {
    chiWidth.value = ItemScroll.value.children[0].scrollWidth;
});

//点击左箭头切换内容
const leftTab = () => {

    // 调用滚动函数，滚动到右边，并显示右边箭头
    ScrollFun(BoxScroll.value, BoxScroll.value.scrollLeft - (chiWidth.value * 3), 0)(rightarrow.value, 'block');
    if (BoxScroll.value.scrollLeft - (chiWidth.value * 3) <= 0) {
        // 调用滚动函数，滚动到右边，并隐藏左边箭头
        ScrollFun()(rightarrow.value, 'block')(leftarrow.value, 'none');

    }
};

//点击右箭头切换内容
const rightTab = () => {

    // 调用滚动函数，滚动到左边，并显示左边箭头
    ScrollFun(BoxScroll.value, BoxScroll.value.scrollLeft + (chiWidth.value * 3), 0)(leftarrow.value, 'block');
    if ((BoxScroll.value.scrollLeft + (chiWidth.value * 3) + BoxScroll.value.offsetWidth) + 2 >= BoxScroll.value.scrollWidth) {
        // 调用滚动函数，滚动到左边，并隐藏右边箭头
        ScrollFun()(rightarrow.value, 'none')(leftarrow.value, 'block');
    }
};
// 数据发生变化，让盒子回到原位
watch(ConData, () => {
    // 调用滚动函数，滚动到左边，并显示左边箭头
    ScrollFun(BoxScroll.value, 0, 0)(leftarrow.value, 'none')(rightarrow.value, 'block');
});

// 复用函数
function ScrollFun(DomElement?: HTMLElement, XTo?: number, YTo?: number) {
    // 如果传入的元素存在，则调用滚动函数
    if (DomElement) DomElement.scrollTo(XTo ? XTo : 0, YTo ? YTo : 0);
    // 返回一个函数，用于控制元素的显示和隐藏
    return function (Stylement?: any, RevealorHidden?: String) {
        // 如果传入的元素存在，则设置元素的显示和隐藏
        if (Stylement) Stylement.style.display = RevealorHidden;
        // 返回一个函数，用于控制元素的显示和隐藏
        return function (Stylement1?: any, RevealorHidden1?: String) {
            // 如果传入的元素存在，则设置元素的显示和隐藏
            if (Stylement1) Stylement1.style.display = RevealorHidden1;
        };
    };
};
</script>

<style scoped lang="scss">
.box {
    position: relative;

    .leftarrow {
        position: absolute;
        top: 195px;
        left: 20px;
        display: none;
    }

    .leftarrow,
    .rightarrow {
        width: 40px;
        height: 40px;
        background-color: #fff;
        border-radius: 40px;
        position: absolute;
        top: 130px;
        right: 15px;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        font-weight: bold;
        box-shadow: 0px 0px 1px 1px #ccc;
        z-index: 99999;
    }

    .leftarrow:hover {
        background-color: #1f69ff;
        color: #fff;
    }

    .rightarrow:hover {
        background-color: #1f69ff;
        color: #fff;
    }

    .NavigationCon {
        display: flex;

        .NavigationCon-box {
            scroll-behavior: smooth;
            overflow-x: scroll;

            .NavigationCon-box-item {
                display: flex;
                height: 350px;
                margin-top: 10px;

                .NavigationCon-box-item-Cards {
                    width: auto;
                    padding-top: 15px;
                    padding-right: 30px;

                    .Card_one {
                        width: 100%;
                        margin-right: 10px;
                        text-align: center;
                        margin: 0;
                    }
                }

                .NavigationCon-box-item-con {
                    width: 12%;
                    height: 100%;
                    margin-left: 35px;
                    text-align: center;

                    .icon {
                        margin: 0 auto;
                        width: 60px;
                        height: 60px;
                        box-shadow: 0 0 10px 3px #ccc;
                        border-radius: 60px;
                        font-size: 40px;
                        text-align: center;
                        line-height: 70px;
                        margin-top: 120px;
                        margin-bottom: 20px;
                    }

                    .icon:hover {
                        background-color: #1f69ff;
                        color: #fff;
                    }
                }
            }
        }

        .NavigationCon-box::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .NavigationCon-box::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        .NavigationCon-box::-webkit-scrollbar-track {
            background-color: transparent;
        }
    }
}
</style>